import React from 'react';
import {ReferenceArrayInput, CheckboxGroupInput,SelectArrayInput,ArrayField,SingleFieldList, ChipField,EmailField, List, Edit, Create, Datagrid, ReferenceField, TextField, EditButton, DeleteButton,DisabledInput, LongTextInput, ReferenceInput, SelectInput, SimpleForm, TextInput } from 'react-admin';



export const SysUserList = (props) => (
    <List title="All users"
    sort={{ field: 'createDate', order: 'DESC' }}
    {...props}>
        <Datagrid>
            <TextField source="nickname" />
            <TextField source="username" />
            <EmailField source="email" />
            <ArrayField source="roles">
                <SingleFieldList>
                    <ChipField source="roleName" />
                </SingleFieldList>
            </ArrayField>
            <EditButton />
            <DeleteButton />
        </Datagrid>
    </List>
);

export const SysUserCreate = (props) => (
    <Create {...props}>
        <SimpleForm>
            <TextInput source="nickname" />
            <TextInput source="username" />
            <TextInput source="password" />
            <TextInput source="email" />
        </SimpleForm>
    </Create>
);

const PostTitle = ({ record }) => {
    return <span>Update {record ? `"${record.nickname}"` : ''}</span>;
};

export const SysUserEdit = (props) => (
    <Edit title={<PostTitle />}  {...props}>
        <SimpleForm>
            <TextInput source="nickname" />
            <TextInput source="username" />
            <TextInput source="password" />
            <TextInput source="email" />
            <ReferenceArrayInput label="Rols" reference="SysRole" source="role_ids"  sort={{ field: 'roleName', order: 'DESC' }}>
                <SelectArrayInput optionText="roleName">
                </SelectArrayInput>
            </ReferenceArrayInput>

        </SimpleForm>
    </Edit>
);